<template>
	<view class="base-button" :style="{
		width: width + 'rpx',
	}">
		<button class="button" id="myButton" :style="{
			background: bgColor,
			color,
			fontSize: size + 'rpx',
			borderRadius: borderRadius + 'rpx',
		}" @click="handleClick">{{ title }}
		</button>
		<slot name="test" :width="44"></slot>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	const props = defineProps({
		title: String,
		width: {
			type: Number,
			default: 200
		},
		bgColor: {
			type: String,
			default: '#27ba9b'
		},
		color: {
			type: String,
			default: '#fff'
		},
		size: {
			type: Number,
			default: 24
		},
		borderRadius: {
			type: Number,
			default: 50
		}
	})

	const emits = defineEmits(['handleClick'])

	const handleClick = () => {
		emits('handleClick')
	}
</script>

<style scoped lang="scss">
	.base-button {
		.button {}
	}
</style>